<template>

    <div class="container">
        <div class="swiper-box">

            <div class="nav-menu">
                <ul class="menu-wrap">
                    <li class="menu-item">
                        <a href="javascript:;">手机 电话卡</a>
                        <div class="children">
                            <ul v-for="(item,index) in menuList" :key="index">
                                <li v-for="(sub,index) in item" :key="index">
                                    <a :href="sub ? '/product/' + sub.id : ''"><img
                                        :src="sub ? sub.img : require('assets/images/item-box-1.png')" alt="">{{sub ?
                                        sub.name : '小米9'}}</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="menu-item">
                        <a href="javascript:;">电视 盒子</a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript:;">笔记本 平板</a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript:;">家电 插线板</a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript:;">出行 穿戴</a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript:;">智能 路由器</a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript:;">电源 配件</a>
                    </li>
                    <li class="menu-item">
                        <a href="javascript:;">生活 箱包</a>
                    </li>
                </ul>
            </div>

            <swiper :options="swiperOption">
                <swiper-slide v-for="(item,index) in slideList" :key="index">
                    <a :href="'/product/' + item.id"><img :src="item.img" alt=""></a>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
        </div>
    </div>

</template>

<script>
    import {swiper, swiperSlide} from 'vue-awesome-swiper';
    import 'swiper/dist/css/swiper.css';

    export default {
        name: "Slider",
        components: {
            swiper,
            swiperSlide
        },
        data() {
            return {
                swiperOption: {
                    autoplay: true,
                    loop: true,
                    effect: 'cube',
                    cubeEffect: {
                        // slideShadows: true,
                        // shadow: true,
                        shadowOffset: 50,
                        shadowScale: 0.6
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                },
                slideList: [
                    {id: 42, img: require("assets/images/slider/slide-1.jpg")},
                    {id: 45, img: require("assets/images/slider/slide-2.jpg")},
                    {id: 46, img: require("assets/images/slider/slide-3.jpg")},
                    {id: 47, img: require("assets/images/slider/slide-4.jpg")},
                    {id: 48, img: require("assets/images/slider/slide-5.jpg")},
                ],
                menuList: [
                    [
                        {id: "30", img: require("assets/images/item-box-1.png"), name: "小米CC9"},
                        {id: "31", img: require("assets/images/item-box-2.png"), name: "小米CC9"},
                        {id: "32", img: require("assets/images/item-box-3.jpg"), name: "小米CC9"},
                        {id: "33", img: require("assets/images/item-box-4.jpg"), name: "小米CC9"}
                    ],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0],
                ]
            }
        }
    }
</script>

<style lang="scss">
    @import "~assets/scss/base.scss";
    @import "~assets/scss/mixin.scss";

    .swiper-box {
        position: relative;

        .swiper-container {
            height: 451px;

            .swiper-button-prev {
                left: 274px;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        .nav-menu {
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
            width: 264px;
            height: 451px;
            z-index: 9;
            padding: 26px 0;
            background-color: rgba(0, 0, 0, .2);

            .menu-wrap {
                .menu-item {
                    height: 50px;
                    line-height: 50px;
                    /*position: relative;*/
                    a {
                        display: block;
                        position: relative;
                        font-size: 16px;
                        color: #fff;
                        padding-left: 30px;

                        &:after {
                            position: absolute;
                            right: 30px;
                            top: 17.5px;
                            content: '';
                            @include bgImg(10px, 15px, "~assets/images/icon-arrow.png");
                        }
                    }

                    &:hover {
                        background-color: #ff6600;
                        .children {
                            display: block;
                        }
                    }

                    .children {
                        width: 962px;
                        height: 451px;
                        background-color: #fff;
                        position: absolute;
                        top: 0;
                        left: 264px;
                        border: 1px solid #e5e5e5;
                        display: none;
                        box-sizing: border-box;

                        ul {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            height: 75px;

                            li {
                                height: 75px;
                                line-height: 75px;
                                flex: 1;
                                padding-left: 23px;
                            }

                            a {
                                color: #333;
                                font-size: 14px;
                            }

                            img {
                                width: 42px;
                                height: 35px;
                                vertical-align: middle;
                                margin-right: 15px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
